<template>
  <div>
    <div>
      <input type="text" :placeholder="state.placeholder" v-model="state.inputValue">
      <button type="button" @click="handleAddClick">添加</button>
    </div>
    <ul>
      <li v-for="(item, index) in state.list" @click="handleDelClick(index)" :key=item>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  // 获取store里面的值
  computed: mapState({
    state: state => state.todoList 
  }),
  methods: {
    ...mapActions(["handleAdd", "handleDel"]),

    handleAddClick() {
      this.handleAdd();
    },
    
    handleDelClick(index) {
      this.handleDel(index);
    }
  }
};
</script>

<style>
</style>